<script setup lang="ts">
import CustomNavbar from "@/pages/mst/components/CustomNavbarMst.vue";
import { getMstelandMstinfoByMstselId, getMstselList } from "@/services/mst";
import type { mstInfoModel, mstSelInfoDtos } from "@/types/mstinfo";
import type { mstsel } from "@/types/mstsel";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref } from "vue";

// const popup = ref<{
//   open: (type?: "top" | "bottom") => void;
//   close: () => void;
// }>();
const query = defineProps<{
  mstselId: string;
}>();
// const mstselId = () =>{

// }
// const pageInfo = ref({
//   mstselId: query.mstselId ? query.mstselId : "0",
//   pageSize: 50,
//   pageNum: 1,
// });
const mstselIndex = ref();
const mstselList = ref<mstsel[]>([]);
// const mstinfoList = ref<mstInfoModel[]>();
const mstselId = ref();
const mstSelInfoDtosData = ref<mstSelInfoDtos>();
const getMstselListData = async () => {
  const res = await getMstselList();
  mstselList.value = res.data;
};
const pickerHandle: UniHelper.RegionPickerOnChange = (ev) => {
  // console.log(ev.detail.value)
  mstselIndex.value = ev.detail.value;
  mstselId.value = mstselList.value[mstselIndex.value].id;
  getMstelandMstinfoByMstselIdData();
};

const getMstelandMstinfoByMstselIdData = async () => {
  // if (mstselId.value) {
  // } else {
  //   if (!query.mstselId) {
  //     mstselId.value = 0;
  //   } else {
  //     mstselId.value = query.mstselId;
  //   }
  // }
  console.log('mstselId------------>'+mstselId.value)
  if (mstselId.value) {
  } else {
    if (uni.getStorageSync("mstselId")) {
      // console.log("111111111111111111--->" + uni.getStorageSync("mstselId"));
      mstselId.value = uni.getStorageSync("mstselId");
      uni.removeStorageSync('mstselId')
      // console.log("222222222222222222--->" + uni.getStorageSync("mstselId"));
    } else {
      mstselId.value = 0;
    }
  }
  const res = await getMstelandMstinfoByMstselId(mstselId.value);
  // mstinfoList.value = res.data.mstinfoList;
  mstSelInfoDtosData.value = res.data;
  mstselId.value = undefined
};
onShow(() => {
  getMstselListData();
  // console.log(mstselIndex.value)
  getMstelandMstinfoByMstselIdData();
});
 
</script>
<template>
  <CustomNavbar></CustomNavbar>
  <!-- <view @tap="popup?.open('bottom')">1111</view> -->
  <!-- <uni-title @tap="popup?.open('bottom')" align="center" color="#1A2846" type="h1" title="全部面试题"></uni-title> -->
  <picker
    mode="selector"
    range-key="mstSelName"
    :range="mstselList"
    @change="pickerHandle"
  >
    <!-- <view >{{ mstselList.filter(item => item.id == pageInfo.mstselId) }}</view> -->
    <view class="mst-title">{{ mstSelInfoDtosData?.mstSelName }}</view>
    <!-- <view class="placeholder" v-else>全部面试题</view> -->
  </picker>
  <!-- <uni-popup ref="popup" background-color="#fff">
    <view>text01</view>
    <view>text02</view>
    <view>text03</view>
    <view>text04</view>
  </uni-popup> -->
  <uni-list>
    <uni-list :border="true">
      <uni-list-chat
        :title="item.mstInfoTitle"
        :avatar="
          mstSelInfoDtosData?.mstSelIcon
            ? mstSelInfoDtosData.mstSelIcon
            : `http://192.168.3.45:9000/mst/2024/01/01/20240101095356-uchlAS6o.png`
        "
        :note="item.mstInfoDes"
        badge-text="12"
        v-for="item in mstSelInfoDtosData?.mstinfoList"
        :key="item.id"
        link
        :to="`/pages/mstinfo/mstinfo?mstinfoId=${item.id}`"
      >
        <view class="chat-custom-right">
          <text class="chat-custom-text">点击率</text>
          <view>{{ item.hits }}</view>
        </view>
      </uni-list-chat>
    </uni-list>
  </uni-list>
</template>


<style lang="scss" scoped>
.mst-title {
  text-align: center;
}

.chat-custom-right {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.chat-custom-text {
  font-size: 12px;
  color: #999;
}
</style>